<template>
  <p v-if="false">这是商品管理页面</p>

  <el-button type="primary" @click="editGood(GOODS_STATUS.add)" style="margin-bottom: 10px">
    新增商品
  </el-button>

  <el-dialog v-model="isVisiable" width="800" :title="GOODS_HEAD_MAP[curEditType]" align-center>
    <GoodsEdit :key="goodsId" :curEditType="curEditType" :goodsId="goodsId" @close="close" @finish="finish" />
  </el-dialog>

  <el-table :data="tree" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all height="300">
    <el-table-column fixed prop="id" label="商品编号" />
    <el-table-column label="商品名称" prop="name">
    </el-table-column>
    <el-table-column prop="price" label="商品价格" />
    <el-table-column label="商品库存" prop="stock">
    </el-table-column>
    <el-table-column label="商品简介">
      <template #default="{ row }">
        <v-html v-html="row.description"></v-html>
      </template>
    </el-table-column>
    <el-table-column label="商品图片">
      <template #default="{ row }">
          <el-image v-if="row.picture != ''" :src="'http://localhost:8080/'+row.picture" fit="contain"
            style="display: flex; align-items: center; height: 60px;" />
        </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button type="primary" @click="editGood(GOODS_STATUS.modify, row.id)">
        编辑
      </el-button>
      <el-button type="danger" @click="delRow(row)">
        删除
      </el-button>
      </template>
      
    </el-table-column>
  </el-table>

  <el-pagination 
    background 
    layout="prev, pager, next" 
    :total="total"
    :page-size="pageSize" 
    @current-change="handlePageChange"
    v-model:current-page="currentPage"
    >
  </el-pagination>
</template>


<script setup>
import GoodsEdit from './GoodsEdit.vue';
import { GOODS_STATUS, GOODS_HEAD_MAP } from '../constants/Goods';
import { ref } from 'vue';
import { getGoodsListAll,getPageDivision,delGoods } from '../api/apiByGoods';
import { onMounted ,onUnmounted} from 'vue';
import { ElMessageBox } from 'element-plus';
import { usePageStore } from '../store/pageStore';


const curEditType = ref(null) // 当前编辑状态
const goodsId = ref(null) // 商品id
const isVisiable = ref(false)
const key = ref(null)
const tree = ref([])
const total = ref(0)
const pageSize = ref(2)
const pageResult=ref({})
const pageStore = usePageStore();
const currentPage = ref(parseInt(pageStore.currentPage));


function onBeforeClose() {
  key.value = Date.now()
  close()
}


// 编辑
function editGood(type, id) {
  curEditType.value = type
  goodsId.value = id
  isVisiable.value = true
}

function finish() {
  close()
  // 重新获取列表...
  fetchData(currentPage.value);
}

function close() {
  // 关闭
  isVisiable.value = false
}

onMounted(async () => {
  currentPage.value = parseInt(sessionStorage.getItem("currentPage")) || 1;
  console.log("onMounted");
  console.log(currentPage.value);
  handlePageChange(currentPage.value);
});


async function fetchData(page) {
  pageResult.value = await getPageDivision(page,pageSize.value)
  total.value = pageResult.value.totalRecords
  tree.value = pageResult.value.data
  console.log("fethData");
  console.log(currentPage.value);
}

function handlePageChange(newPage) {
  sessionStorage.setItem("currentPage", newPage);
  currentPage.value = newPage
  // pageStore.updateCurrentPage(newPage)
  console.log("newPage");
  
  console.log(newPage)
  // 根据新的页码重新获取数据
  fetchData(currentPage.value)
}

// 删除商品                       
const delRow = row => {
  ElMessageBox.confirm('确定要删除此商品吗？', {
    closeOnClickModal: false,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(async () => {
    if (await delGoods(row.id)) {
      fetchData(currentPage.value)
    }
  }).catch(() => {})
}
</script>

<style scoped></style>